<template>
  <q-modal
    v-model="layoutModal"
    maximized
    position="right"
    :content-css="{minWidth: '100vw', minHeight: '100vh'}"
  >
    <q-modal-layout content-class="flex column modal-content">
      <template slot="header">
        <statusbar></statusbar>
        <q-toolbar>
          <!-- <q-btn color="primary" v-close-overlay label="Close" /> -->
          <q-btn flat round dense @click="closeModal" icon="reply"/>
          <q-toolbar-title>{{ $t('预警详情') }}</q-toolbar-title>
          <q-btn flat dense icon="assignment" :label="$t('预警处理')" @click="openDealPage"/>
        </q-toolbar>
      </template>
      <!-- modal-body -->
      <template v-if="defaultData">
        <div class="col-auto" style="padding: 6px;">
          <table class="table">
            <tr>
              <th>{{ $t('标段') }}</th>
              <td colspan="3">{{defaultData.linename}}</td>
            </tr>
            <tr>
              <th>{{ $t('工区') }}</th>
              <td colspan="3">{{defaultData.sectname}}</td>
            </tr>
            <tr>
              <th>{{ $t('工点') }}</th>
              <td colspan="3">{{defaultData.wsname}}</td>
            </tr>
            <tr>
              <th>{{ $t('断面') }}</th>
              <td>{{defaultData.csec_name}}</td>
              <th>{{ $t('测点') }}</th>
              <td>{{defaultData.point_alias}}</td>
            </tr>
            <tr>
              <th>{{ $t('测量类型') }}</th>
              <td>---</td>
              <th>{{ $t('测量人员') }}</th>
              <td>{{defaultData.surveyorname}}</td>
            </tr>
            <tr>
              <th>{{ $t('测量时间') }}</th>
              <td>{{ defaultData.surveytime }}</td>
              <th>{{ $t('报警级别') }}</th>
              <td>
                <div
                  class="alert-color-box"
                  :class="$tools.alertLevelColor(defaultData.alert_level)"
                ></div>
              </td>
            </tr>
            <tr>
              <th>{{ $t('变形速率') }}</th>
              <td>{{ (Number(defaultData.speed) * 1000).toFixed(2) }} mm/d</td>
              <th>
                {{ $t('速率阈值') }}
                <br>mm/d
              </th>
              <!-- RT02 -->
              <td>{{ limit(defaultData.ruledata, 'RT02') }}</td>
            </tr>
            <tr>
              <th>{{ $t('累计变形量') }}</th>
              <td>{{ (Number(defaultData.cumu) * 1000).toFixed(2) }} mm</td>
              <th>
                {{ $t('累计阈值') }}
                <br>mm
              </th>
              <!-- RT01 -->
              <td>{{ limit(defaultData.ruledata, 'RT01') }}</td>
            </tr>
          </table>
        </div>
        <div class="col">
          <div class="deal-title">{{ $t('处置记录') }}</div>
          <q-list v-if="defaultData.dealinfos">
            <q-item v-if="defaultData.dealinfos.length <= 0">
              <q-item-main>{{ $t('暂无处置数据') }}</q-item-main>
            </q-item>
            <q-item v-for="(item, idx) in defaultData.dealinfos" :key="idx">
              <q-item-main>
                <q-item-tile label>
                  {{ item.userName }}
                  <span style="font-size: .5rem;">(Tel: {{ item.cellphone }})</span>
                  <!-- time -->
                  <div class="deal-time">{{ item.dealdate }}</div>
                </q-item-tile>
                <div class="deal-info">{{ item.dealinfo || '---' }}</div>
                <div style="font-size: .9rem">
                  <span>{{ $t('附件') }}：</span>
                  <span v-if="item.attach.length <= 0">{{ $t('暂无附件数据') }}</span>
                  <!-- 图片列表，带浏览 -->
                  <span
                    v-for="(att, idx) in item.attach"
                    :key="idx"
                    @click="openPreview(idx, item.attach)"
                  >{{ att.attachname }}</span>
                </div>
              </q-item-main>
            </q-item>
          </q-list>
        </div>
      </template>
      <!--
        将QInnerLoading放置为最后一个子元素。
        这对于将其显示在其他内容之上很重要。
      -->
      <q-inner-loading :visible="boxLoading">
        <template v-if="boxLoadingContent">{{ boxLoadingContent }}</template>
        <q-spinner-gears v-else size="50px" color="primary"></q-spinner-gears>
      </q-inner-loading>
    </q-modal-layout>
    <!-- 处置 -->
    <deal ref="deal" @fresh="freshData"></deal>
    <!-- <gi-img-preview ref="preview" type="text"></gi-img-preview> -->
  </q-modal>
</template>

<script>
import deal from './dealPage.vue';
export default {
  components: {
    deal
  },
  data() {
    return {
      layoutModal: false,
      boxLoading: true,
      boxLoadingContent: "",
      defaultData: null
    };
  },
  watch: {
    '$store.getters.subCurrPage'(val) {
      if (val === 'alert-detailPage') {
        this.layoutModal = false
      }
    }
  },
  methods: {
    show(data) {
      this.layoutModal = true;
      this.$store.dispatch('AddSubPage', 'alert-detailPage', true)
      this.defaultData = data;
      this.$nextTick(() => {
        this.getAlertDetail();
      });
    },
    closeModal() {
      this.layoutModal = false
      this.$store.dispatch('RemoveSubPage')
    },
    getAlertDetail() {
      this.boxLoading = true;
      this.$axios.getAlertDetail({
        id: this.defaultData.alertid
      }).then(result => {
        this.defaultData = Object.assign(
          {},
          this.defaultData,
          result.data || {}
        );
        this.boxLoading = false;
      }).catch(err => {
        this.boxLoadingContent = err.msg || this.$t('该预警信息错误');
      });
    },
    limit(rule, type) {
      if (!rule) return;
      return Number(rule[type].minlimit).toFixed(2) + '~' +
        Number(rule[type].maxlimit).toFixed(2);
    },
    openDealPage() {
      this.$refs.deal.show(this.defaultData);
    },
    freshData() {
      this.getAlertDetail();
    },
    openPreview(idx, arr) {
      // 显示预览
      this.$preview.show(idx, arr);
    }
  },
};
</script>

<style lang="less" scoped>
.table {
  font-size: 0.8rem;
  th,
  td {
    padding: 4px 0;
  }
}

.deal-title {
  padding: 10px;
  background-color: #cecece;
  font-weight: 600;
  letter-spacing: 1px;
}

.q-list {
  padding: 0;

  .q-item {
    padding: 6px;

    .deal-info {
      padding-left: 0.7rem;
      color: #6f6f6f;
    }

    .deal-time {
      float: right;
      text-align: right;
      color: #737373;
      font-size: 0.8rem;
      line-height: 0.8rem;
      white-space: nowrap;
    }
  }
}
</style>

